<template>
    <div>
        <!--登陆模态框-->
        <div class="wrapper">
            <div class="block">
                <van-icon name="cross" size="25px" color="red" style="margin: 10px" @click="backPage"/>
                <h1 style="margin-left: 40%">登陆</h1>
                <van-form>
                    <van-field
                            v-model="phone"
                            name="手机号"
                            label="手机号"
                            placeholder="手机号"
                            :rules="[{ required: true, message: '请填写手机号' }]"/>

                    <van-field
                            :class="{'hidden':passwordShowState}"
                            v-model="password"
                            type="password"
                            name="密码"
                            label="密码"
                            placeholder="密码"
                            :rules="[{ required: true, message: '请填写密码' }]"/>

                    <h4 style="font-size: 12px;color: gray;margin-left: 20px;">未注册的手机号将自动注册账号</h4>

                    <div style="margin: 16px;">
                        <van-button round block type="info" native-type="submit" @click="onSubmit">
                            {{loginSubmitText}}
                        </van-button>
                    </div>

                </van-form>
                <span style="margin: 15px;font-size: 12px;color: gray"
                      @click="loginStateUpdate">{{loginStateText}}</span>
            </div>
        </div>

        <!--        验证码模态框-->
        <van-overlay :show="codeShowState">
            <div class="wrapper">
                <div class="block">
                    <van-row>
                        <van-col>
                            <van-icon name="arrow-left" size="25px" color="red" style="margin: 10px"
                                      @click="codeShowState=false"/>
                        </van-col>
                    </van-row>

                    <van-row>
                        <van-col style="margin-left: 20px;font-size: 25px;margin-top: 50px">
                            <span>输入验证码</span>
                        </van-col>
                    </van-row>

                    <van-row>
                        <van-col style="margin-left: 20px;padding: 5px">
                            <span style="font-size: 14px;">
                                短信已经发送至
                                <span style="font-size: 15px;font-weight: bold">{{phone}}</span>
                            </span>
                        </van-col>
                    </van-row>

                    <!-- 密码输入框 -->
                    <van-password-input
                            :value="code"
                            :length="4"
                            :focused="showKeyboard"
                            @focus="showKeyboard = true"
                    />

                    <van-count-down
                            :class="{'hidden':!codeTimeEndShowState}"
                            style="margin-left: 15px;font-size: 12px;margin-top: 10px;color: gray;"
                            ref="countDown"
                            millisecond
                            :time="time"
                            format="ss 秒后重新获取验证码"
                            :auto-start="false"
                            @finish="finish"
                    />

                    <span :class="{'hidden':codeTimeEndShowState}"
                          style="margin-left: 15px;font-size: 12px;margin-top: 15px;color: red;"
                          @click="resend">
                        重新发送验证码
                    </span>

                    <!-- 数字键盘 -->
                    <van-number-keyboard
                            v-model="code"
                            :show="showKeyboard"
                            @blur="showKeyboard = true"
                    />
                </div>
            </div>
        </van-overlay>

    </div>
</template>

<script>
    import myApi from "../../api/my";
    import {Toast} from "vant";
    import cookie from "js-cookie";

    export default {
        name: "Login",
        data() {
            return {
                // 登录相关======================================
                loginShowState: false,           //登录模态框显示状态
                phone: "",
                password: "",
                passwordShowState: true,            //密码框显示状态
                loginSubmitText: "获取短信验证码",   //登录提交按钮状态文本
                loginStateText: "密码登录",        //登录状态文本

                // 验证码相关===================================
                codeShowState: false,            //验证码输入界面
                code: '',                        //验证码
                showKeyboard: true,
                time: 60000,                     //验证码倒计时
                codeTimeEndShowState: true,      //倒计时结束显示

            }
        },
        methods: {

            backPage() {
                this.$router.go(-1)
            },
            resend() { //重新发送验证码
                myApi.sendSms(this.phone).catch(err => {
                    Toast.fail(err.toString())
                })
            },
            finish() {
                this.codeTimeEndShowState = false
            },
            onSubmit() {   //登录提交
                if (this.passwordShowState) {
                    //短信登录
                    myApi.sendSms(this.phone).then(() => {
                        //发送请求到后台跳转到输入验证码模态框
                        this.codeShowState = true
                        this.$refs.countDown.start();
                    }).catch(err => {
                        Toast.fail(err.toString())
                    })
                } else {
                    //账号密码登录
                    myApi.login(this.phone, this.password).then(response => {
                        // 1.拿到jwt
                        let _this = this
                        let token = response.token;
                        cookie.set("token", token, {domain: "localhost"})
                        // 2.拿到用户数据
                        myApi.getUserInfo().then(response => {
                            //放入cookie
                            let userInfo = JSON.stringify(response.userInfo)
                            cookie.set("userInfo", userInfo, {domain: "localhost"})
                            //跳转到我的页
                            _this.$router.push("/my")
                        })
                    }).catch(error => {
                        this.phone = ""
                        this.password = ""
                        Toast.fail(error.data.message)
                    })
                }
            },
            loginStateUpdate() {   //登录状态改变
                if (this.loginSubmitText == "获取短信验证码") {
                    this.loginSubmitText = "登录"
                    this.loginStateText = "短信登录"
                    this.passwordShowState = false
                } else if (this.loginSubmitText == "登录") {
                    this.loginSubmitText = "获取短信验证码"
                    this.loginStateText = "密码登录"
                    this.passwordShowState = true
                }
            }
        },
        watch: {
            code(value) { //监视验证码
                if (value.length === 4) {
                    //验证 验证码
                    myApi.verifyPhoneCode(this.phone, this.code).then(response => {
                        try {
                            // 1.拿到jwt
                            let token = response.token;
                            let _this = this
                            cookie.set("token", token, {domain: "localhost"})
                            // 2.拿到用户数据
                            myApi.getUserInfo().then(response => {
                                //放入cookie
                                let userInfo = JSON.stringify(response.userInfo)
                                cookie.set("userInfo", userInfo, {domain: "localhost"});
                                //跳转到我的页
                                _this.$router.push("/my")

                            })
                        } catch (e) {
                            this.code = ""
                            Toast.fail("服务器错误")
                        }
                    }).catch(err => {
                        this.code = ""
                        Toast.fail(err.data.message)
                    })
                }
            }
        }
    }


</script>

<style scoped>
    .hidden {
        display: none;
    }
    .wrapper {

        background-color: white;
        height: 100%;
    }
</style>